<template>
    <transition name="fade">
        <div v-if="showModal" class="modal-overlay">
            <div class="modal-container relative">
                <!-- <button @click="showModal = false" class="absolute top-4 right-4 text-gray-300 hover:text-white">
                    <i class="fa fa-times text-xl"></i>
                </button> -->

                <div class="ennea-bg"></div>
                <div class="md:flex">
                    <!-- 左侧 - 九型人格信息 -->
                    <div class="hidden md:block md:w-1/2 bg-gradient-to-br from-gray-900 to-gray-800 p-8">
                        <div class="flex flex-col h-full justify-between">
                            <div>
                                <h1 class="text-3xl font-bold mb-2 glow-text">九型人格测试系统</h1>
                                <!-- <p class="text-gray-300 mb-6">欢迎回来，继续你的人格探索之旅</p> -->

                                <div class="mb-8">
                                    <h2 class="text-xl font-semibold mb-4 text-cyan-300">为什么选择我们？</h2>
                                    <ul class="space-y-3 text-gray-300">
                                        <li class="flex items-start">
                                            <i class="fa fa-shield-alt text-cyan-300 mt-1 mr-2"></i>
                                            <span>安全可靠的测试环境</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-chart-bar text-cyan-300 mt-1 mr-2"></i>
                                            <span>专业的分析报告</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-user-friends text-cyan-300 mt-1 mr-2"></i>
                                            <span>个性化成长建议</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-mobile-alt text-cyan-300 mt-1 mr-2"></i>
                                            <span>便捷的手机号登录</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
                                <h3 class="text-sm font-semibold text-cyan-300 mb-2">快速提示</h3>
                                <p class="text-gray-300 italic">"使用手机号即可快速登录，无需记住复杂密码"</p>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧 - 登录表单 -->
                    <div class="w-full md:w-1/2 bg-gray-800 p-8">
                        <div class="text-center mb-8 md:hidden">
                            <h1 class="text-2xl font-bold mb-1 glow-text">九型人格测试系统</h1>
                            <!-- <p class="text-gray-300 text-sm">欢迎回来</p> -->
                        </div>

                        <!-- 登录标题 -->
                        <div class="text-center mb-6">
                            <h2 class="text-xl font-semibold text-cyan-300 mb-2">快速登录</h2>
                            <p class="text-gray-400 text-sm">使用手机号即可登录</p>
                        </div>

                        <!-- 简化登录表单 -->
                        <form @submit.prevent="submitLogin" class="space-y-4">
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-300 mb-1">手机号码</label>
                                <input 
                                    v-model="form.mobile" 
                                    @blur="validatePhone" 
                                    type="tel" 
                                    id="phone"
                                    placeholder="请输入11位手机号"
                                    class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg input-glow text-white focus:outline-none focus:border-cyan-400" 
                                />
                                <p v-if="errors.mobile" class="text-red-400 text-xs mt-1">{{ errors.mobile }}</p>
                            </div>

                            <div class="pt-2">
                                <button 
                                    type="submit"
                                    :disabled="isSubmitting"
                                    class="w-full py-3 bg-cyan-600 text-white font-medium rounded-lg btn-glow hover:bg-cyan-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
                                >
                                    <span v-if="isSubmitting">登录中...</span>
                                    <span v-else>立即登录</span>
                                </button>
                            </div>
                        </form>

                        <!-- 第三方登录 - 微信登录组件 -->
                        <!-- <div class="mt-8 pt-6 border-t border-gray-700">
                            <p class="text-center text-gray-400 mb-4">或使用微信快速登录</p>
                            <div class="flex justify-center">
                                <WechatLogin 
                                    mode="button"
                                    :button-class="'w-12 h-12 bg-green-500 text-white rounded-full flex items-center justify-center hover:bg-green-600 transition'"
                                    :show-text="false"
                                    @login-success="handleWechatLoginSuccess"
                                    @login-error="handleWechatLoginError"
                                />
                            </div>
                        </div> -->

                        <div class="mt-6 text-center text-sm text-gray-400">
                            还没有账号？ <button @click="goToRegister" class="text-cyan-400 hover:text-cyan-300 underline">立即注册</button>
                        </div>

                        <!-- <div class="mt-4 text-center text-xs text-gray-500">
                            <p>登录即表示同意我们的服务条款和隐私政策</p>
                            <p class="mt-1">系统将自动验证您的身份信息</p>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserInfo } from '/@/stores/userInfo'
import { checkIn } from '/@/api/frontend/user/index'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import WechatLogin from './wechatLogin.vue'

const showModal = ref(true)
const isSubmitting = ref(false)
const userInfo = useUserInfo()
const router = useRouter()

// 简化的登录表单数据
const form = reactive({
    tab: 'login' as 'login',
    mobile: '',
    username: '',
    password: '',
    captcha: '',
    keep: false,
    captchaId: '',
    captchaInfo: '',
    registerType: 'login' as 'login'
})

const errors = reactive({
    mobile: ''
})

// 验证手机号
const validatePhone = () => {
    if (!form.mobile) {
        errors.mobile = '手机号不能为空'
    } else {
        const regex = /^1[3-9]\d{9}$/
        if (!regex.test(form.mobile)) {
            errors.mobile = '请输入有效的11位手机号码'
        } else {
            errors.mobile = ''
        }
    }
}

// 提交登录表单
const submitLogin = async () => {
    validatePhone()

    if (!errors.mobile) {
        isSubmitting.value = true
        
        try {
            // 设置用户名为手机号，密码为手机号后三位
            form.username = form.mobile
            form.password = form.mobile.slice(-3)
            
            const res = await checkIn('post', form)
            
            if (res.code === 1) {
                // 使用 buildAdmin 的用户信息存储
                userInfo.dataFill(res.data.userInfo)
                
                ElMessage.success('登录成功！')
                showModal.value = false
                
                // 触发父组件事件或刷新页面
                window.location.reload()
            } else {
                ElMessage.error(res.msg || '登录失败，请重试')
            }
        } catch (error) {
            console.error('登录失败:', error)
        } finally {
            isSubmitting.value = false
        }
    }
}

// 处理微信登录成功
const handleWechatLoginSuccess = (userInfo: any) => {
    ElMessage.success('微信登录成功！')
    showModal.value = false
    // 刷新页面或跳转
    window.location.reload()
}

// 处理微信登录错误
const handleWechatLoginError = (error: string) => {
    ElMessage.error(error || '微信登录失败，请重试')
}

// 跳转到注册页面
const goToRegister = () => {
    router.push('/register')
}

// 自动登录检查
const checkAutoLogin = () => {
    if (userInfo.isLogin()) {
        // 用户已登录，关闭登录弹窗
        showModal.value = false
        router.push('/')
    }
}

// 组件挂载时检查自动登录
onMounted(() => {
    checkAutoLogin()
})
</script>

<style scoped>

body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: #f0f2f5;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(79, 192, 210, 0.3);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: fadeIn 0.3s ease-out;
}

.glow-text {
    text-shadow: 0 0 10px rgba(79, 192, 210, 0.7);
}

.input-glow:focus {
    box-shadow: 0 0 10px rgba(79, 192, 210, 0.5);
    border-color: #4fc0d2;
}

.btn-glow {
    box-shadow: 0 0 15px rgba(79, 192, 210, 0.7);
}

.btn-glow:hover {
    box-shadow: 0 0 20px rgba(79, 192, 210, 0.9);
}

.social-btn {
    transition: all 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-3px);
}

.wechat-btn:hover {
    background-color: #2ad15a;
}

.ennea-bg {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="none" stroke="%234fc0d2" stroke-width="0.5" stroke-dasharray="5,5"/><circle cx="100" cy="100" r="60" fill="none" stroke="%234fc0d2" stroke-width="0.5" stroke-dasharray="5,5"/><circle cx="100" cy="100" r="40" fill="none" stroke="%234fc0d2" stroke-width="0.5" stroke-dasharray="5,5"/><line x1="100" y1="20" x2="100" y2="180" stroke="%234fc0d2" stroke-width="0.5"/><line x1="20" y1="100" x2="180" y2="100" stroke="%234fc0d2" stroke-width="0.5"/><line x1="40" y1="40" x2="160" y2="160" stroke="%234fc0d2" stroke-width="0.5"/><line x1="160" y1="40" x2="40" y2="160" stroke="%234fc0d2" stroke-width="0.5"/></svg>');
    background-size: 100px 100px;
    background-repeat: repeat;
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        margin: 20px;
    }
}
</style>